<!DOCTYPE html>

<html>
<head>
    <style type="text/css" media="screen">
        body {
          height: 1000px;
          margin: 0;
        }
        #test {
        width: 100px;
        height: 100px;
        background-color: red;
        position: fixed;
        top: 10px;
        left: 10px;
        transform: translate(50px, 50px);
        }

        .box:hover {
          background-color: green;
        }
    </style>
    <script src="../resources/text-based-repaint.js" type="text/javascript"></script>
    <script type="text/javascript">
        function repaintTest()
        {
            document.getElementById('test').style.background='green';
        }

        function setupTest() {
            window.scrollBy(0, 50);
            runRepaintAndPixelTest();
        };
        window.addEventListener('load', setupTest, false);
    </script>
</head>
<body>

<!--
    https://bugs.webkit.org/show_bug.cgi?id=36686
    Test repainting of a fixed-position element with a transform.
    The box should be entirely green.
-->
<div id="test"></div>

</body>
</html>
